<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传前预览</title>
</head>
<body>
  <!-- 如果想要添加多个文件， 配合 multiple 使用 -->
  <input id="pic" type="file" multiple onchange="selectImg()">
  <img id="preview" src="" alt="">
</body>
<script>
  // form 表单中  DOM.value 获取到数据
  // 文件 file 只读，没有value值，但是它有 files

  var pic = document.getElementById('pic')
  var preview = document.getElementById('preview')
  function selectImg () {
    console.log(pic.files) // 展示文件的数据
    const file = pic.files[0] // 只选择第一张图片
    // 借助于 文件 API  FileReader 对象解析文件的信息
    var reader = new FileReader()
    reader.readAsDataURL(file) // 将文件转换为 base64 地址 --- 异步
    // 等待转换完成
    reader.onload = function () { // 通过this.result 就可以获取到转换的base64地址
      preview.src = this.result
    }
  }
</script>
</html>